<template>
  <div>
    <!-- 访问 store的共享数据的第一种方式 -->
    <h3>当前设置的共享值为：{{ this.$store.state.count }}</h3>
    <div>
      <button @click="handle">设置+1</button>
    </div>
    <div>
      <button @click="handleN">设置传参的点击动作</button>
    </div>
    <div>
      <button @click="asynchHandle">异步的设置传参加一</button>
    </div>
    <div>
      <button @click="asynchHandleN">异步的设置传参加N</button>
    </div>
    <span>{{ this.$store.state.name }}</span>
    <div>
      <span>{{ this.$store.getters.showName }}</span>
    </div>
  </div>
</template>

<script>
export default {
  // 访问属性 修改方法等等操作的第一种方式

  data() {
    return {}
  },

  methods: {
    //   修改store数据的第一种方式
    handle() {
      this.$store.commit('add')
    },
    // 修改store数据第一种方式且携带数据
    handleN() {
      this.$store.commit('addN', 3)
    },
    asynchHandle() {
      // 专门用来触发actions中的异步方法
      this.$store.dispatch('addAsync')
    },
    asynchHandleN() {
      this.$store.dispatch('addAsyncN', 5)
    },
  },
}
</script>

<style lang="less" scoped>
</style>